<template>
	<view class="">
		<view v-if="info && !loading">
			<block>
				<view class="row">
					<view class="label">事件名称</view>
					<view class="content">{{info.data.eventName}}</view>
				</view>
				<view class="row">
					<view class="label">事件类型</view>
					<view class="content">{{info.data.eventCategory}}<text v-if="info.eventSubclass">{{info.eventSubclass}}</text></view>
				</view>
				<view class="row">
					<view class="label">涉及人数</view>
					<view class="content">{{info.data.eventPeopleNum}}</view>
				</view>
				<view class="row">
					<view class="label">事件简述</view>
					<view class="content">{{info.data.eventDescribe}}</view>
				</view>
				<view class="row">
					<view class="label">发生位置</view>
					<view class="content">{{info.data.eventLocation}}</view>
				</view>
				<view class="row-direction width-p-100" v-if="info.img && info.img.length>0">
					<view class="label">事件图片</view>
					<view class="flex flex-wrap margin-top">
						<view class="file-image" v-for="(item,index) of info.img" :key="index">
							<image :src="`${fileUrl}${item.url}`" width="100%" height="100%" radius="15rpx" @tap.stop="showImage(info.img,index)"></image>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="label">事件程度</view>
					<view class="content">{{info.data.eventLevelName}}</view>
				</view>
				<view class="margin-top">
					<wakin-node-line>
						<wakin-node-line-item v-for="(item,index) of activities" :key="index" :dot-bg-color="item.flow_sts==='1'?'rgb(26,188,156)':'#cccccc'"
							:border-color="item.flow_sts==='1'?'rgb(26,188,156)':'#cccccc'">
							<view class="padding-lr padding-bottom">
								<view class="text-bold" :style="{color:item.flow_sts==='1'?'rgb(26,188,156)':'#cccccc'}">
									{{item.task_name}}
								</view>
								<view class="margin-top-xs">
									<text>{{index===0?'上报人':'操作人'}}:</text>
									<text class="margin-left">{{item.flow_action_user_name}}</text>
								</view>
								<view class="margin-top-xs" v-if="index<activities.length-1 && index!==0">
									<text>操作动作:</text>
									<text class="margin-left">{{item.flow_action_name_text}}</text>
								</view>
								<view class="margin-top-xs">
									<text>时间:</text>
									<text class="margin-left">{{(item.flow_action_time)|| "--"}}</text>
								</view>
								<view class="margin-top-xs" v-if="item.text_data">
									<text>结果:</text>
									<text class="margin-left">{{item.text_data}}</text>
								</view>
								<!-- <view class="margin-top-xs" v-if="item.file_data">
									<u--image :src="`${fileUrl}/${item.file_data}`"></u--image>
								</view> -->
								<view class="flex flex-wrap margin-top-xs" v-if="item.img">
									<view class="file-image" v-for="(image,imageIndex) of item.img" :key="imageIndex">
										<image :src="`${fileUrl}${image}`" width="100%" height="100%" radius="15rpx" @tap.stop="showImage(item.img,imageIndex)"></image>
									</view>
								</view>
							</view>
						</wakin-node-line-item>
					</wakin-node-line>
				</view>
			</block>
			<slot name="custom"></slot>
		</view>
		<view v-else class="detail-empty">
			<wakin-data-empty :message="message"></wakin-data-empty>
		</view>
	</view>
</template>

<script>
	import {
		eventDetail,
	} from "@/api/Interface/event"
	import {
		useGetEventLevel
	} from "../report/hooks/useEventLevel"
	import {
		ActionMap,
		ActionEnum
	} from "@/enums/actions"
	/**
	 * description 事件详情基本信息模块 
	 */
	export default {
		name: "EventBasicDetail",
		props: {
			eventId: {
				type: [String, Number],
				default: "",
			},
			data: {
				type: Object,
				default: () => {
					return null
				}
			}
		},
		data() {
			return {
				loading: true,
				info: null,
				fileUrl: this.$basic_config.fileUrl,
				activities: [],
				MainColor: this.$MainColor
			}
		},
		async mounted() {
			await this.getData()
		},
		methods: {
			async getData() {
				await eventDetail({
					id: this.eventId
				}).then(async res => {
					if (res.code === 200) {
						this.info = res.data;
						if (this.info.flow && this.info.flow.length > 0) this.formatFlow()
						if (this.info && this.info.data) {
							const {
								code,
								rows,
								msg
							} = await useGetEventLevel();
							if (code === 200) this.$set(this.info.data, "eventLevelName", rows.find(r => r.dictValue === this.info.data.eventLevel)?.dictLabel ?? "--");
							else this.$toast(msg);
						}
					} else {
						this.message = res.msg;
						this.$toast(res.msg);
					}
				}).catch(err => {
					this.message = "请求异常"
				})
				this.loading = false;
				this.$emit("update:data", this.info)
			},
			formatFlow() {
				try {
					this.info.flow.map(item => {
						item.flow_action_name_text = item.flow_action_name ? (ActionEnum[Number(item.flow_action_name)] ?? item.flow_action_name) : ""
						console.log("操作动作", item.flow_action_name_text);
					})
					this.activities = [...this.info.flow]
					this.activities.unshift({
						flow_sts: '1',
						task_name: '上报',
						flow_action_user_name: this.info.flow[0].create_name,
						flow_action_time: this.info.flow[0].create_time
					})
					this.activities.push({
						flow_sts: this.info.flow[0].satisfaction ? '1' : '0', // 控制进行到本节点的样式
						task_name: this.info.flow[0].satisfaction ? '已评价' : '未评价',
						flow_action_user_name: this.info.flow[0].satisfaction_name,
						flow_action_time: this.info.flow[0].satisfaction_time,
						text_data: this.info.flow[0].satisfaction_remark,
					})
					this.activities.map(m => m.flow_action_time && (m.flow_action_time = m.flow_action_time.replace(/T/g, " ")))
					console.log("流程activities", this.activities);
				} catch (e) {
					//TODO handle the exception
					console.log("流程activities--err", e);
				}
			},
			showImage(source, index) {
				if (source) {
					const urls = source.map(m => this.fileUrl + (m?.url ?? `${m}`))
					console.log("urls", urls);
					uni.previewImage({
						urls,
						current: index
					})
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.row {
		display: flex;
		align-items: flex-start;
		padding: 20rpx 30rpx;
	}

	.row-direction {
		padding: 20rpx 30rpx;
	}

	.label {
		white-space: nowrap;
		font-weight: bold;
		margin-top: 6rpx;
	}

	.content {
		margin-left: 30rpx;
		background-color: #f0f0f0;
		padding: 10rpx;
		min-width: 75%;
		border-radius: 6rpx;
		word-wrap: break-word;
	}

	.file-image {
		width: calc(96% / 3);
		border-radius: 15rpx;
		margin-bottom: 30rpx;
		height: 0;
		padding-top: 32%;
		display: inline-block;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}

	.file-image:not(:nth-child(3n)) {
		margin-right: calc(4% / 2);
	}

	.detail-empty {
		min-height: 50vh;
	}
</style>